<template>
  <div class="gContainer">
<!--    <chartPie :data="chart_two_data" :legend="legendData"></chartPie>-->
    <chartLine :legend="four_legend_data_one" :xAxis="four_xAxis_data" :series="four_series_data"></chartLine>
  </div>
</template>

<script>
// @ is an alias to /src
import gSearch from '@/components/gSearch.vue'
import threeGraph from '@/components/threeGraph.vue'
import chartPie from '@/components/chartPie'

import chartLine from '@/components/chartLine'

export default {
  name: 'threeView',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    gSearch,
    // eslint-disable-next-line vue/no-unused-components
    threeGraph,
    // eslint-disable-next-line vue/no-unused-components
    chartPie,
    chartLine
  },
  data () {
    return {
      // d3jsonParser()处理 json 后返回的结果
      data: {
        nodes: [],
        links: []
      },
      names: ['企业', '贸易类型', '地区', '国家'],
      labels: ['Enterprise', 'Type', 'Region', 'Country'],
      linkTypes: ['', 'type', 'locate', 'export'],

      treeData: require('../data/flare.json'),
      data_val: [1, 2, 3, 40, 213, 123, 43, 2],
      yAxis: ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6', '测试7', '测试8'],
      chart_two_data: [{
        value: 1048,
        name: '火影'
      }, {
        value: 735,
        name: '海贼'
      }, {
        value: 580,
        name: '死神'
      }, {
        value: 484,
        name: '龙珠'
      }, {
        value: 300,
        name: '幽游白书'
      }, {
        value: 300,
        name: '猫和老鼠'
      }
      ],
      legendData: {
        orient: 'vertical',
        left: '5%',
        top: 'middle',
        icon: 'circle',
        selectedMode: false,
        textStyle: {
          rich: {
            a: {
              align: 'left',
              width: 50
            },
            b: {
              align: 'left',
              fontWeight: 'bold',
              width: 40
            }
          }
        }
      },
      four_legend_data_one: ['火影', '海贼', '死神', '龙珠', '葫芦娃'],
      four_xAxis_data: ['2020/0/01', '2020/0/02', '2020/0/03', '2020/0/04', '2020/0/05', '2020/0/06',
        '2020/0/07'
      ],
      four_series_data: [{
        name: '火影',
        type: 'line',
        stack: '工单总量',
        data: [120, 132, 101, 134, 90, 230, 210]
      }, {
        name: '海贼',
        type: 'line',
        stack: '工单总量',
        data: [120, 132, 101, 134, 90, 230, 210]
      }, {
        name: '死神',
        type: 'line',
        stack: '工单总量',
        data: [120, 132, 101, 134, 90, 230, 210]
      }, {
        name: '龙珠',
        type: 'line',
        stack: '工单总量',
        data: [120, 132, 101, 134, 90, 230, 210]
      }, {
        name: '葫芦娃',
        type: 'line',
        stack: '工单总量',
        data: [120, 132, 101, 134, 90, 230, 210]
      }]

    }
  },
  methods: {
    // 视图更新
    update (json) {
      console.log('update')
      console.log(json)
      this.d3jsonParser(json)
    },
    /*eslint-disable*/
    // 解析json数据，主要负责数据的去重、标准化
    d3jsonParser (json) {
      const nodes = []
      const links = [] // 存放节点和关系
      const nodeSet = [] // 存放去重后nodes的id

      // 使用vue直接通过require获取本地json，不再需要使用d3.json获取数据
      // d3.json('./../data/records.json', function (error, data) {
      //   if (error) throw error
      //   graph = data
      //   console.log(graph[0].p)
      // })

      for (let item of json) {
        for (let segment of item.p.segments) {
          // 重新更改data格式
          if (nodeSet.indexOf(segment.start.identity) == -1) {
            nodeSet.push(segment.start.identity)
            nodes.push({
              id: segment.start.identity,
              label: segment.start.labels[0],
              properties: segment.start.properties
            })
          }
          if (nodeSet.indexOf(segment.end.identity) == -1) {
            nodeSet.push(segment.end.identity)
            nodes.push({
              id: segment.end.identity,
              label: segment.end.labels[0],
              properties: segment.end.properties
            })
          }
          links.push({
            source: segment.relationship.start,
            target: segment.relationship.end,
            type: segment.relationship.type,
            properties: segment.relationship.properties
          })
        }
      }
      console.log(nodes)
      console.log(links)
      // this.links = links
      // this.nodes = nodes
      this.data = {
        nodes,
        links
      }
      // return { nodes, links }
    }
  }
}
</script>

<style lang="scss" scoped>
.gContainer {
  position: relative;
  border: 2px #000 solid;
  background-color: #9dadc1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  //width: 900px;
  //height: 900px;
}
</style>
